<template>
	<view class="GoodsDetail">
		<goods-swiper :theData="goodsData['swiperList']"></goods-swiper>
		<goods-info :theData="goodsData['info']"></goods-info>
		<goods-specs :theData="goodsData['sku']" :selected="skuId"></goods-specs>
	</view>
</template>

<script>
  import { mapState } from 'vuex';
	import GoodsSwiper from '../../components/goodsDetail/GoodsSwiper.vue'
	import GoodsInfo from '../../components/goodsDetail/GoodsInfo.vue'
	import GoodsSpecs from '../../components/goodsDetail/GoodsSpecs.vue'
	
	export default {
		name: 'GoodsDetail',
		components: {
			GoodsSwiper,
			GoodsInfo,
			GoodsSpecs
		},
		data() {
			return {
				goodsData: {},
				skuId: this.$Route.query.id,
			}
		},
		computed: {
			...mapState ([
				'debugSetting' // 将 this.debugSetting 映射为 this.$store.state.debugSetting
			])
		},
		onLoad() {
			this.loadDetail(this.skuId);
		},
		methods: {
			loadDetail(skuId) { // 加载商品详情数据
				let reqParams = {
				  skuId: skuId
				}
				this.$api.goods.getGoodsDetail(reqParams, (res) => {
					let {
						swiper: swiperList,
						info: info,
						sku: sku,
					} = res.data;
					this.goodsData = {
						swiperList,
						info,
						sku,
					};
				})
			},
		}
	}
</script>

<style lang="scss">
	.GoodsDetail {    
		background-color: #f8f8f8;
	}
</style>
